<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>表格可展开显示更多列-demo-简单版</title>
    <meta name='renderer' content='webkit'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
    <meta name='viewport'
          content='width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0'>
    <link rel='stylesheet' href='../../static/layui/css/layui.css' media='all'>
</head>
<body>
<div class='layui-card'>
    <div class='layui-card-header'>
        <button type="button" class="layui-btn layui-btn-normal btn-demo-reload">表格重载</button>
    </div>
    <div class='layui-card-body'>
        <table id='detailsTable' lay-filter='detailsTable' ></table>
    </div>
</div>
<script type='text/html' id='barDemo'>
    <a class='layui-btn layui-btn-xs' lay-event='edit'>编辑</a>
    <a class='layui-btn layui-btn-danger layui-btn-xs' lay-event='del'>删除</a>
</script>

<script src='../../static/layui/layui.js'></script>
<script type="text/javascript">
    layui.config({ base: '../../assets/libs/layuiadmin/modules/'});
    layui.use(['detailsTable','common'], function () {
        layui.detailsTable.render({
            elem: '#detailsTable',
            id: '#detailsTable',
            url: 'test.json',
            toolbar: '#barDemo',
            detailsField: "details",
            width: 1500,
            page: true,
            cols: [[
                {field: 'id', title: 'ID', sort: true}
                , {field: 'username', title: '用户名', edit: true}
                , {field: 'city', title: '城市', edit: true}
                , {title: '操作', toolbar: '#barDemo', width: 150}
            ]],

            //注：展开的列Items
             openCols: [
                 { field: 'productName', title: '名称' ,width:'200px'},
                 { field: 'productCode', title: '编码' ,width:'100px'},
                 { field: 'price', title: '价格' ,width:'100px'},
                 { field: 'brand', title: '品牌' ,width:'120px'}
            ] ,
            //注：监听排序 {detailsTable}
            sort: function (obj) {
                console.log(obj)
            }
            //注：0：同时只展开一项 1：一直展开不关闭之前  def：0 {detailsTable}
            , openType: 1
        });

        // 工具栏点击案例
        layui.table.on('toolbar(detailsTable)', function (obj) {
            layer.msg("点击了");
        });

        //注：表格重载案例
        layui.jquery(".btn-demo-reload").click(function () {
            layui.table.reload("#detailsTable", {where: {text: "测试搜索条件"}});
        });
    });
</script>
</body>
</html>


